<template>
  <div id="app"
       v-loading="loading"
       element-loading-background="rgba(255, 255, 255, 1)"
       :element-loading-text="globalLoading.text"
  >
    <router-view  :style="{
      opacity: loading?0:1
    }"/>
  </div>
</template>

<script>
import config from '@/config'
export default {
  data(){
    return {
      loading: true
    }
  },
  computed:{
    code(){
      return this.$route.query.code
    },
    globalLoading (){
      return this.$store.state.common.loading
    }
  },
  watch:{
    "globalLoading.visible": {
      handler(e){
        this.loading = e
      },
      immediate: true
    }
  },
  created() {
    document.title = config.projectName || ''
    let loginHandler = () => {
      return new Promise((resolve, reject)=>{
        setTimeout(()=>{
          this.$store.dispatch('init').then(()=>{
            this.$store.dispatch('setLoading', {
              visible: false
            })
            resolve()
          }).catch(()=>{
            this.$store.dispatch('setLoading', {
              visible: false
            })
            reject()
          })
        },0)
      })
    }

    if(this.code){
      var path = this.$router.currentRoute.path
      this.$store.dispatch('login', this.code).then(()=>{
        this.$router.replace({
          path: path
        })
        loginHandler().then(()=>{
          this.$store.dispatch('toDefaultPage')
        })
      }).catch((err)=>{
        this.$store.dispatch('toDefaultPage')
        setTimeout(()=>{
          window.location.reload();
        },100)
      })
    }else{
      loginHandler()
    }
  }
}
</script>

<style lang="scss" src="@/assets/style/global.scss"></style>
<style lang="scss" scoped>
#app{
  width: 100%;
  height: 100%;
}
</style>
